<template>
  <div class="monitor-list-elevator-item-content">  
    <el-row type="flex">
      <el-row class="title-row">
        <el-col class="title">
          <span class="elevator-no-title">电梯编号</span>
          <span class="elevator-location-title">电梯位置</span>
          <span class="door-status-title">开门状态</span>
          <span class="run-status-title">运行状态</span>
          <span class="error-status-title">故障</span>
          <span class="power-status-title">应急电源</span>
          <span class="alarm-status-title">警铃复位</span>
          <span class="power-switch-title">应急电源</span>
          <span class="run-switch-title">运行开关</span>
          <span class="call-status-title">呼梯</span>
        </el-col>
      </el-row>
      <el-row class="monitor-list-elevator-item-row" type="flex" justify="space-between">
        <el-col class="monitor-list-elevator-item-col">
          <monitor-list-elevator-item v-if="monitorData && monitorData.length > 0" :elevatorObject="monitorData[0]"/>
        </el-col>
        <el-col class="monitor-list-elevator-item-col">
          <monitor-list-elevator-item v-if="monitorData && monitorData.length > 1" :elevatorObject="monitorData[1]"/>
        </el-col>
        <el-col class="monitor-list-elevator-item-col">
          <monitor-list-elevator-item v-if="monitorData && monitorData.length > 2" :elevatorObject="monitorData[2]"/>
        </el-col>
        <el-col class="monitor-list-elevator-item-col">
          <monitor-list-elevator-item v-if="monitorData && monitorData.length > 3" :elevatorObject="monitorData[3]"/>
        </el-col>
        <el-col class="monitor-list-elevator-item-col">
          <monitor-list-elevator-item v-if="monitorData && monitorData.length > 4" :elevatorObject="monitorData[4]"/>
        </el-col>
        <el-col class="monitor-list-elevator-item-col">
          <monitor-list-elevator-item v-if="monitorData && monitorData.length > 5" :elevatorObject="monitorData[5]"/>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>

import MonitorListElevatorItem from "./MonitorListElevatorItem"

export default {
  name: 'MonitorListItem',
  components:{
    MonitorListElevatorItem
  },
  props: {
    monitorData: {
      type: Array,
      required:true
    }
  },
  data() {
      
      return {
        
      };
    },
    methods: {
      handleSelectionChange: function() {

      },
    },
    mounted() {
      
    },
    watch: {
    }
}
</script>

<style lang="scss" scoped>
.monitor-list-elevator-item-content {
  width: 100%;
  margin-top: 20px;

  .title-row {
    .title {
      width: 80px;
    }
  }
  
  .elevator-no-title {
    font-size: 12px;
    color: lightgray;
    margin-top: 8px;
    display: block;
  }
  .elevator-location-title {
    font-size: 12px;
    color: lightgray;
    margin-top: 33px;
    display: block;
  }
  .door-status-title {
    font-size: 12px;
    color: lightgray;
    margin-top: 30px;
    display: block;
  }
  .run-status-title {
    font-size: 12px;
    color: lightgray;
    margin-top: 10px;
    display: block;
  }
  .error-status-title {
    font-size: 12px;
    color: lightgray;
    margin-top: 5px;
    display: block;
  }
  .power-status-title {
    font-size: 12px;
    color: lightgray;
    margin-top: 5px;
    display: block;
  }

  .alarm-status-title {
    font-size: 12px;
    color: lightgray;
    margin-top: 5px;
    display: block;
  }

  .power-switch-title {
    font-size: 12px;
    color: lightgray;
    margin-top: 10px;
    display: block;
  }

  .run-switch-title {
    font-size: 12px;
    color: lightgray;
    margin-top: 15px;
    display: block;
  }

  .call-status-title {
    font-size: 12px;
    color: lightgray;
    margin-top: 15px;
    display: block;
  }

  .monitor-list-elevator-item-row {
    width: 100%;

    .monitor-list-elevator-item-col {
      width: 15%;
    }
  }
}

</style>